<template>
  <div class="container">
    <v-header :goBack="true" :backHome="false" ></v-header>
    <div class="debit-credit-home" ref="scrollContent">
      <div class="d-flex flex-column homepage" v-if="pageData">
        <section class="slide-wrp">
          <cube-slide ref="slide" :data="[pageData]">
            <cube-slide-item v-for="(item, index) in [pageData]" :key="index" @click.native="clickHandler(item, index)">
              <a href="javascript:void(0)">
                <img :src="item.pageBannerUrl">
              </a>
            </cube-slide-item>
          </cube-slide> 
        </section>
        <section class="loan border-1px" v-if="pageData && pageData.products">
          <div class="d-flex flex-column">
            <a href="javascript:void(0)" @click="toDetail(pageData.id, product)" v-for="(product, index) in pageData.products" :key="index">
              <div class="card d-flex border-bottom-1px">
                <img class="logo" :src="product.productIcon" :alt="product.productName" />
                <div class="detail d-flex flex-column justify-content-between">
                  <div class="header d-flex">
                    <h3 class="title">{{product.productName}}</h3>
                    <label class="badge" v-if="product.productTips">{{product.productTips}}</label>
                  </div>
                  <p class="desc">{{product.productDesc}}</p>
                  <p class="limit">额度：<span class="number">{{product.productLimit}}</span></p>
                </div>
                <div class="flex-fill d-flex align-items-center justify-content-end">
                  <i class="fa fa-angle-right"></i>
                </div>
              </div>
            </a>
          </div>
        </section>
        <div class="d-app d-flex flex-column align-items-center">
          <router-link to="/download-app" :class="'d-app-link'">下载app申请更多产品</router-link>
          <img class="logo" src="/static/images/d-app.png" />
        </div>
      </div>
    </div>
    <v-footer :currentIndex="parseInt(currentTab)" @onTabChange="onTabChange"></v-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from '@/components/header/head'
  import footer from '@/components/common/footer'
  import {visitorReport, pageProducts} from '@/service/index'
  import {Config} from '@/config/mUtils'
  import {CHANGE_LIST_PAGE_DATA} from '@/store/mutation-types'
  import {mapState, mapMutations} from 'vuex'

  export default {
    props: {
      pageId: {
        type: String
      },
      currentTab: {
        type: String,
        default: 1
      }
    },
    data() {
      return {}
    },
    created() {
      if (!this.pageData) {
        this.initPageData()
      }
    },
    components: {
      'v-header': header,
      'v-footer': footer
    },
    methods: {
      toDetail(pageId, product) {
        if (parseInt(product.inIframe) === 1) {
          this.$router.push({
            path: `/market/debit-credit/detail/${product.id}/${pageId}`,
            query: {
              url: product.productLink
            }
          })
        } else {
          visitorReport(pageId, Config.visitorReport.product, product.id)
          .then((resp) => {
            console.log(resp)
            location.href = product.productLink
          })
          .catch((error) => {
            console.log(error)
          })
        }
      },
      clickHandler(item, index) {
        console.log(index)
      },
      onTabChange(data) {
        this.initPageData()
      },
      initPageData() {
        if (parseInt(this.$route.params.pageId) > 0) {
          pageProducts(this.$route.params.pageId)
          .then((resp) => {
            let pageData = resp.data.data
            pageData.products = pageData.products.list
            this.changePageData(pageData)
          })
          .catch((error) => {
            console.log(error)
          })

          visitorReport(this.$route.params.pageId, Config.visitorReport.list)
          .then((resp) => {
            console.log(resp)
          })
          .catch((error) => {
            console.log(error)
          })
        }
      },
      ...mapMutations({changePageData: CHANGE_LIST_PAGE_DATA})
    },
    computed: {
      top() {
        let offset = -(this.activeIndex * 30)
        return `margin-top: ${offset}px`
      },
      ...mapState(['pageData'])
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/variable.styl"
  @import "../../../common/stylus/mixin.styl"

  .debit-credit-home
    position: relative
    width: 100%
    height: 100%
    margin-top: 2rem;
    .homepage
      .slide-wrp
        background: #fbf2ed
        .cube-slide
          .cube-slide-group
            .cube-slide-item
              height: 120px
              img
                height: 100%
                width: 100%
      .loan
        margin-top: 10px
        background: $color-white
        .card
          padding: 12px 3.833333%
          text-align: center
          .logo
            flex: 0 0 60px
            width: 60px
            height: 60px
          .detail
            line-height: 22px
            margin-left: 24px
            .header
              .title
                color: #333
                font-size: 16px
                text-align: left 
              .badge
                height: 16px
                line-height: 17px
                margin-left: 16px
                padding: 0 6px
                border-radius: 10px
                color: #fff
                background: #D81720
                font-size: 10px
            .desc
              font-size: 12px
              color: #b2b2b2
              text-align: left
            .limit
              text-align: left
              .number
                color: #ff8a00
      .d-app
        padding: 14px 12px 12px 12px
        background: $color-white
        margin-bottom: 40px
        img
          height: 58px
        .d-app-link
          height: 22px
          line-height: 22px
          padding: 0 12px
          border: 1px solid $color-dark-grey
          border-radius: 10px
          text-decoration: none
          color: $color-dark-grey
          font-size: 13px
          text-align: center
</style>
